<script setup lang="ts">
import { ref, onBeforeMount, watch } from 'vue'
import { $Inquire, $Department } from '@/api/health'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const healthList = ref([])

// 挂载前调用
onBeforeMount(() => {
    $Inquire().then(res => {
        healthList.value = res.data
    })
})

// 监听路由type变化
watch(() => route.query.type, () => {
    if (route.query.type === '0') {
        $Inquire().then(res => {
            healthList.value = res.data
        })
    } else {
        $Department({ classification: route.query.type }).then(res => {
            healthList.value = res.data
        })
    }
})

// 跳转健康详情
const goToHealthDetail = (id) => {
    router.push('/healthDetail?id=' + id)
}
</script>

<template>
    <div class="health-list">
        <div class="health-item" @click="goToHealthDetail(health.id)" v-for="health in healthList" :key="health.id">
            <img class="health-item-img" :src="health.url" alt="">
            <div class="health-item-txt">
                <div class="health-item-text">{{ health.title }}</div>
                <div class="health-item-time">{{ health.time }}</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.health-list {
    display: flex;
    flex: 7;
    flex-direction: column;
    background-color: #f7f7f7;
    box-shadow: 0.2vw 0.2vw 0.2vw #ccc;

    .health-item {
        display: flex;
        height: 26vh;
        padding: 1.5vw;
        border-top: 0.5vh solid #fff;
        cursor: pointer;

        .health-item-img {
            width: 12vw;
            margin-right: 1.5vw;
        }

        .health-item-txt {
            display: flex;
            flex-direction: column;
            padding: 1vw;
            justify-content: space-between;

            .health-item-text {
                font-size: 1.3vw;
                font-weight: 800;
            }

            .health-item-time {
                font-size: 1vw;
                color: #999;
            }
        }


    }
}
</style>